
<div>    
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td><div style="width:260px"></div></td>                
            <td></td>
            <td><div style="width:260px"></div></td>                
            <td></td>
            <td><div style="width:300px"></div></td>                
            <td></td>
            <td><div style="width:260px"></div></td>                
        </tr>
        <tr>
            <td>
                <div ng-hide="userDetail || !users.length" class=" smooth-panel" ng-class="{ 'smooth-panel-select' : userFocus }" >    
                    <b>Users</b>    <input type=text ng-model="userFilter" placeholder="Search..."/>    
                    <div ng-repeat="e in users| filter:userFilter">        
                        <a ng-href="#/user/{{e.uid}}" > &nbsp; {{ e.mapid}} &nbsp; &nbsp;<i>{{ e.firstname}} {{ e.lastname}}</i> &nbsp;</a>    
                    </div>
                </div>                

                <div ng-if="userDetail" class='smooth-panel-select' ng-class="{ 'smooth-panel-edit' : userEditing }">
                    <h2>User Information</h2>
                    <form name="userForm" novalidate>
                        <table> 
                            <tr>
                                <td>
                                    {{user.email}} &nbsp; <i><b>[ {{user.permission}} ]</b></i><br/>
                                    Auth: {{user.provider}}
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div ng-show="userEditing && luser.provider==='password' && user.uid === luser.uid">
                                        <table><tr><td>
                                        <input type="text" ng-model='user.firstname'  />  
                                                </td><td>
                                        <input type='text' ng-model='user.lastname' />
                                                </td>
                                            </tr></table>
                                    </div>
                                    <div class=display ng-show="!userEditing || luser.provider != 'password' || user.uid !== luser.uid">
                                        <div>{{user.firstname}} {{user.lastname}}</div>
                                    </div>
                                </td>
                            </tr>
                            <tr><td>
                                    <div class="display" ng-show="!userEditing" >{{user.phone1}}</div>
                                    <div class="display" ng-show="!userEditing" >{{user.phone2}}</div>
                                    <div class="display" ng-show="!userEditing" >{{user.phone3}}</div>
                                    <div class="display" ng-show="!userEditing" >{{user.phone4}}</div>
                                    <div ng-show="userEditing">
                                        <input type='text' ng-model='user.phone1' ng-show="userEditing" />
                                    </div>
                                    <div ng-show="userEditing">
                                        <input type='text' ng-model='user.phone2'  />
                                    </div>
                                    <div ng-show="userEditing">
                                        <input type='text' ng-model='user.phone3'  />
                                    </div>
                                    <div ng-show="userEditing">
                                        <input type='text' ng-model='user.phone4'  />
                                    </div>
                                </td></tr>
                        </table>
                        <div ng-hide="luser === undefined || luser === null">
                            <button class='btn btn-default btn-xs active' ng-click="edit('user')" ng-disabled=" userEditing" >Edit</button>
                            <button class='btn btn-default btn-xs active' ng-click="cancel('user')" ng-hide="!userEditing"                         >Cancel</button>
                            <button class='btn btn-default btn-xs active' ng-click="save('user')" ng-hide="!userEditing || userForm.$invalid"    >Save</button>
                            <br/>
                            <button class='btn btn-default btn-xs active' ng-click="destroy('user')" ng-disabled=" userEditing"                         >Delete</button>   
                            <br/>
                            <a ng-href="#/create/team/{{user.uid}}" class="btn btn-default btn-xs active">Register a team</a>
                        </div>

                    </form>
                </div>

            </td>

            <td><div style='border-left:#dddddd solid 1px;height:600px'> </div></td>
            <td>
                <div ng-hide="teamDetail || !teams.length" class=" smooth-panel" ng-class="{ 'smooth-panel-select' : teamFocus }" >    
                    <b>Teams</b>    <input ng-model="teamFilter" placeholder="Search..."/>    
                    <div ng-repeat="e in teams| filter:teamFilter ">      
                        <a ng-href="#/team/{{e.uid}}" > &nbsp; {{ e.mapid}} &nbsp; {{ e.age}} {{e.gender}}  {{ e.name}} &nbsp;</a>    
                    </div>
                </div>     

                <div ng-show="teamDetail" class='smooth-panel-select' ng-class="{ 'smooth-panel-edit' : teamEditing }">
                    <h2>Team </h2>
                    <form name="teamForm" novalidate>
                        <table>
                            <tr><td>Name </td><td>
                                    <div ng-show="teamEditing"><input type='text' ng-model='team.name' /></div>
                                    <div class=display ng-show="!teamEditing">{{team.name}}</div>
                                </td>
                            </tr>
                            <tr><td>Age group &nbsp; </td><td>
                                    <div class="display" ng-show="!teamEditing">{{team.age}} {{team.gender}}</div>
                                    <select ng-show="teamEditing" ng-model="team.age"
                                            ng-options="a for a in ages">
                                    </select>
                                    <select ng-show="teamEditing" ng-model="team.gender"
                                            ng-options="g for g in genders">
                                    </select>
                                </td>
                            </tr>
                            <tr><td>Class</td><td>
                                    <div class="display" ng-show="!teamEditing">{{team.age}} {{team.class}}</div>
                                    <select ng-show="teamEditing" ng-model="team.class"
                                            ng-options="c for c in classes">
                                    </select>
                                </td>
                            </tr>
                            <tr><td>Managers </td><td>
                                    <div ng-repeat="u in users">
                                        <a ng-href="#/user/{{u.uid}}" />{{ u.firstname}} {{u.lastname}}</a>
                                    </div>
                                </td></tr>
                            
                            <div>
                                <a ng-href='#/schedule/all/{{team.uid}}'>Schedule</a>
                            </div>


                        </table>
                        
                        <div ng-hide="luser === undefined || luser === null">
                            <button class='btn btn-default btn-xs active' ng-click="edit('team')" ng-disabled=" teamEditing"                         >Edit</button>
                            <button class='btn btn-default btn-xs active' ng-click="cancel('team')" ng-hide="!teamEditing"                         >Cancel</button>
                            <button class='btn btn-default btn-xs active' ng-click="save('team')" ng-hide="!teamEditing || teamForm.$invalid"    >Save</button>
                            <br/>
                            <button class='btn btn-default btn-xs active' ng-click="destroy('team')" ng-disabled=" teamEditing"                         >Delete</button>
                            <br/>
                            <a ng-href="#/create/request/{{team.uid}}" ng-disabled=" teamEditing" class="btn btn-default btn-xs active">Request field</a>
                        </div>
                    </form>
                </div>

            </td>

            <td><div style='border-left:#dddddd solid 1px;height:600px'> </div></td>

            <td>
                <div ng-hide="requestDetail || !requests.length" class=" smooth-panel" ng-class="{ 'smooth-panel-select' : requestFocus }" >    
                    <b>Requests</b>    <input ng-model="requestFilter" placeholder="Search..."/>    
                    <div ng-repeat="e in requests | filter:requestFilter">       
                        <a ng-href="#/request/{{e.uid}}" > Request {{ e.name }} &nbsp;</a>    
                    </div>
                </div>

                <div ng-show="requestDetail" class='smooth-panel-select' ng-class="{ 'smooth-panel-edit' : requestEditing }">
                    <h2>Field Request {{ request.name }}</h2>
                    <form name="requestForm" novalidate>

                        <table>
                            <tr>
                                <td>
                                    Team <i>{{ teams[0].name}}</i>
                                    <br/>
                                    <span ng-repeat="u in users"><i>&nbsp;&nbsp;&nbsp; {{ u.lastname}}, {{ u.firstname}} </i><br/></span>
                                </td>
                                <td>
                                    <div ng-hide="luser === undefined || luser === null">
                                        <button class='btn btn-default btn-xs active' ng-click="edit('request')" ng-disabled=" requestEditing"                          >Edit</button>
                                        <button class='btn btn-default btn-xs active' ng-click="cancel('request')" ng-hide=    "!requestEditing"                          >Cancel</button>
                                        <button class='btn btn-default btn-xs active' ng-click="save('request')" ng-hide="!requestEditing" ng-disabled="requestForm.$invalid"  >Save</button>
                                        <br/>
                                        <button class='btn btn-default btn-xs active' ng-click="destroy('request')" ng-disabled=" requestEditing"                          >Delete</button>
                                    </div>
                                </td>
                            </tr>
                        </table>

                        <br/>

                        <fieldset>
                            <legend>
                                Location and time
                            </legend>

                            <table>
                                <tr>
                                    <td>
                                        Preferred
                                        <div class=display ng-hide="requestEditing">
                                            {{request.field1.name}} 
                                        </div>
                                        <div ng-hide="!requestEditing">
                                            <select class="XXXXform-control"  ng-model="request.field1" 
                                                    ng-options="(f.name+' '+f.surface+' '+f.use+' '+f.class) for f in fieldsallarr" >
                                            </select>
                                        </div>

                                        <div class=display ng-hide="requestEditing">
                                            {{request.time1}}
                                        </div>
                                        <div ng-hide="!requestEditing">
                                            <select  ng-model="request.time1" 
                                                    ng-options="t for t in request.field1.slots" >
                                            </select>
                                        </div>
                                        <input ng-show='request.time1 === "Other" && requestEditing' type="text" ng-model="request.other1" />
                                        <div class=display ng-show='request.time1 === "Other" && !requestEditing' type="text" >{{request.other1}}</div>
                                    </td>
                                    <td>&nbsp;&nbsp;&nbsp;</td>
                                    <td>
                                        Alternate
                                        <div class=display ng-hide="requestEditing">
                                            {{request.field2.name}}
                                        </div>
                                        <div ng-hide="!requestEditing">
                                            <select  ng-model="request.field2" 
                                                    ng-options="(f.name+' '+f.surface+' '+f.use+' '+f.class) for f in fieldsallarr" >
                                            </select>
                                        </div>

                                        <div class=display ng-hide="requestEditing">
                                            {{request.time2}}
                                        </div>
                                        <div ng-hide="!requestEditing">
                                            <select  ng-model="request.time2" 
                                                    ng-options="t for t in request.field2.slots" >
                                            </select>
                                        </div>
                                        <input ng-show='request.time2 === "Other" && requestEditing' type="text" ng-model="request.other2" />
                                        <div class=display ng-show='request.time2 === "Other" && !requestEditing' type="text" >{{request.other2}}</div>

                                    </td>
                                </tr>
                            </table>
                        </fieldset>

                        <br/>

                        <fieldset>
                            <table>
                                <tr>
                                    <td></td>
                                    <td>Preferred &nbsp;&nbsp;</td>
                                    <td>Alternate</td>
                                </tr>
                                <tr ng-hide="!requestEditing" ng-repeat="d in days" >
                                    <td>{{d}} &nbsp;&nbsp;</td>
                                    <td><input type='checkbox' ng-model="request['day1' + d]" ng-disabled="!requestEditing" /></td>
                                    <td><input type='checkbox' ng-model="request['day2' + d]" ng-disabled="!requestEditing" /></td>                                        
                                </tr>
                                <tr ng-hide="requestEditing" ng-repeat="d in days" >
                                    <td>{{d}} &nbsp;&nbsp;</td>
                                    <td>
                                        <div class="display" ng-show="request['day1' + d] === true"  >x</div>
                                        <div class="display" ng-hide="request['day1' + d] === true"  > &nbsp;</div>
                                    </td>
                                    <td>
                                        <div class="display" ng-show="request['day2' + d] === true"  >x</div>
                                        <div class="display" ng-hide="request['day2' + d] === true"  > &nbsp;</div>
                                    </td>
                                </tr>

                            </table>

                        </fieldset>

                        <br/>

                        <fieldset>
                            <legend>
                                Sessions per week
                            </legend>
                            <div class=display ng-hide="requestEditing">{{request.sessions}}</div>
                            <div ng-hide="!requestEditing">
                                <input type='radio' value='1'  ng-model='request.sessions' ng-disabled="!requestEditing" /> 1
                                &nbsp;&nbsp;&nbsp;&nbsp;                                    
                                <input type='radio' value='2'  ng-model='request.sessions' ng-disabled="!requestEditing" /> 2
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <input type='radio' value='3'  ng-model='request.sessions' ng-disabled="!requestEditing" /> 3
                            </div>
                            <br/>
                            <p class=small>Rec teams may request only one practice per week</p>
                        </fieldset>

                        <br/>

                        <fieldset>
                            <legend>Purpose</legend>
                            <div class=display ng-hide="requestEditing">{{request.purpose}}</div>
                            <div ng-hide="!requestEditing">
                                <input type='radio' value='Practice'  ng-model='request.purpose' ng-disabled="!requestEditing"  /> Practice
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <input type='radio' value='Scrimmage'  ng-model='request.purpose' ng-disabled="!requestEditing"  /> Scrimmage
                                <br/>
                                <p class=small>Field requests for tournaments, league <br/>
                                    games, and make-up games must be requested <br/>
                                    using the Home Game Field Request Form.</p>
                            </div>
                        </fieldset>

                        <br/>

                        <fieldset>
                            <legend>
                                Start date 
                            </legend>
                            <div ng-show="!requestEditing" class=display >{{request.startdate}}</div>
                            <input ng-show="requestEditing" type='date' ng-model='request.startdate' placeholder="yyyy-MM-dd" min="2014-01-01" max="2022-12-31"  />
                        </fieldset>

                        <br/>

                        <fieldset>
                            <legend>
                                Special instructions or comments
                            </legend>
                            <div class=display ng-hide="requestEditing">{{request.comment}}&nbsp;</div>
                            <div ng-if="requestEditing">
                                <textarea ng-disabled="!requestEditing" rows=5 cols=40 ng-model='request.comment' ></textarea>
                            </div>
                        </fieldset>

                        <br/>
                    </form>
                </div>
            </td>

            <td><div style='border-left:#dddddd solid 1px;height:600px'> </div></td>

            <td>
                <div ng-hide="fieldDetail || !fields.length" class=" smooth-panel" ng-class="{ 'smooth-panel-select' : fieldFocus }" >    
                    <b>Fields</b>    <input ng-model="fieldFilter" placeholder="Search..."/>    
                    <div ng-repeat="e in fields| filter:fieldFilter">        
                        <a ng-href="#/field/{{e.uid}}" > &nbsp;  {{ e.mapid}} &nbsp; {{ e.username}} {{ e.name}} &nbsp;</a>    
                    </div>
                </div>                    

                <div ng-show="fieldDetail === true" class='smooth-panel-select' ng-class="{ 'smooth-panel-edit' : fieldEditing }">
                    <h2>{{field.name}}</h2>
                    <form name="fieldForm" novalidate>
                        <table>
                            <tr><td>Name </td><td>
                                    <div ng-show="!requestEditing" class=display >{{field.name}}</div>
                                    <input ng-show="requestEditing" type='text' ng-model='field.name' ng-show="fieldEditing" />
                                </td></tr>
                            <tr><td>Location </td><td>
                                    <div ng-show="!requestEditing" class=display >{{field.location}}</div>
                                    <input ng-show="requestEditing" type='text' ng-model='field.location' ng-show="fieldEditing" />
                                </td></tr>
                            <tr><td>Surface </td><td>
                                    <div ng-show="!requestEditing" class=display >{{field.surface}}</div>
                                    <input ng-show="requestEditing" type='text' ng-model='field.surface' ng-show="fieldEditing" />
                                </td></tr>
                            <tr><td>Use </td><td>
                                    <div ng-show="!requestEditing" class=display >{{field.class}}</div>
                                    <input ng-show="requestEditing" type='text' ng-model='field.class' ng-show="fieldEditing" />
                                </td></tr>
                            <tr><td>Slots </td><td>
                                    <div ng-repeat="s in field.slots">                                            
                                        <div ng-hide="!fieldEditing"><input type='text' ng-model='s'  /></div> 
                                        <div class=display ng-hide="fieldEditing || s == 'Other'">{{s}}</div>
                                    </div>
                                </td></tr>
                            <tr>
                                <td>
                                    <div>
                                        <a ng-href='#/schedule/{{field.uid}}/all'>Schedule</a>
                                    </div>
                                </td>
                            </tr>
                        </table>

                        <div ng-hide="luser === undefined || luser === null">
                            <button class='btn btn-default btn-xs active' ng-click="edit('field')" ng-disabled=" fieldEditing"                         >Edit</button>
                            <button class='btn btn-default btn-xs active' ng-click="cancel('field')" ng-hide="!fieldEditing"                         >Cancel</button>
                            <button class='btn btn-default btn-xs active' ng-click="save('field')" ng-hide="!fieldEditing || fieldForm.$invalid"   >Save</button>
                            <br/>
                            <button class='btn btn-default btn-xs active' ng-click="destroy('field')" ng-disabled=" fieldEditing"                         >Delete</button>
                        </div>

                    </form>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                &nbsp; 
            </td>
        </tr>
    </table>
</div>
